<template>
	<view>
		<view class="header">
			<view class="bg">
				<view class="box">
					<view class="box-hd">
						<view class="avator">
							<img v-if="flag=='phone'" :src="info.avatar_text">
							<img  v-if="flag=='wechat'" :src="info.avatar_text">
						</view>
						<view class="phone-number" v-if="flag=='phone'">{{info.mobile_text}}</view>
						<view class="phone-number" v-if="flag=='wechat'">{{info.nickname}}</view>
					</view>
					<view class="box-bd">
						<view class="item" @click="songjian">
							<view class="icon"><img src="../../static/message.png"></view>
							<view class="text">送检单</view>
						</view>
						<view class="item" @click="toOrder">
							<view class="icon"><img src="../../static/favorite.png"></view>
							<view class="text">订单管理</view>
						</view>
						<view class="item">
							<view class="icon"><img src="../../static/service.png"></view>
							<view class="text">
								<button hover-class="none" open-type="contact"> 我的客服</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list-content">
			<view class="list" @click="toprofile">
				<view class="li noborder">
					<view class="icon">
						<image src="../../static/card.png"></image>
					</view>
					<view class="text">个人资料</view>
					<image class="to" src="../../static/to.png"></image>
				</view>
			</view>
			<view class="list">
				<view class="li " @click="address">
					<view class="icon">
						<image src="../../static/skin.png"></image>
					</view>
					<view class="text">地址管理</view>
					<image class="to" src="../../static/to.png"></image>
				</view>
				<!-- <view class="li " >
					<view class="icon"><image src="../../static/help.png"></image></view>
					<view class="text">帮助中心</view>
					<image class="to" src="../../static/to.png"></image>
				</view> -->
				<!-- <view class="li " >
					<view class="icon"><image src="../../static/about.png"></image></view>
					<view class="text">关于我们</view>
					<image class="to" src="../../static/to.png"></image>
				</view> -->
				<view class="li ">
					<view class="icon">
						<image src="../../static/opinion.png"></image>
					</view>
					<view class="text">
						<view class="feedback">
							<button hover-class="none" open-type="feedback"> 意见反馈</button>
						</view>


					</view>
					<image class="to" src="../../static/to.png"></image>
				</view>
			</view>
			<view class="list" @click="tosetting">
				<view class="li noborder">
					<view class="icon">
						<image src="../../static/set.png"></image>
					</view>
					<view class="text">系统设置</view>
					<image class="to" src="../../static/to.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	onLoad(option) {
		this.type = option.type ? option.type : ""
		this.phone = option.phone ? option.phone : ""
		// this.id = option.id ? option.id : ""
		this.flag = option.flag ? option.flag : ""
		console.log(option)

		this.getuserinfo()
		


		


	},
	data() {
		return {
			type: "",
			info:{},
			flag:"",
			phone:""
		}
	},

	methods: {
		// 获取个人信息
		async getuserinfo()
		{
			let data = {
				phone:this.phone,

				type:this.type
			}
			let result = await this.$u.api.user.info(data)
			if(result.code)
			{
				this.info =  result.data
			}
		},
		tosetting() {
			uni.$u.route({
				url: "pages/index/setting"
			})
		},
		address() {
			uni.$u.route({
				url: "pagesB/address/index"
			})
		},
		songjian() {
			uni.$u.route({
				url: "pages/test/seller/songjian",
				params: {
					type: this.type
				}
			})
		},
		toOrder() {
			uni.$u.route({
				url: "pages/test/seller/order",
				params: {
					type: this.type
				}
			})
		},
		toprofile() {
			uni.$u.route({
				url: "pages/test/seller/profile"
			})
		}
	}
}
</script>

<style lang="scss">
// 点击时样式
button::after {
	border: none;
}

button {
	background-color: #fff;
	border-radius: 0;
	padding: 0;
	font-size: 13px;

}


.feedback {
	width: 80px;
	padding-right: 15px;
	color: #666;

	button::after {
		border: none;
	}

	button {
		background-color: #fff;
		border-radius: 0;
		padding: 0;
		font-size: 14px;
		color: #666;

		padding-right: 22px;

	}

}

page {
	background-color: #f1f1f1;
	font-size: 30upx;
}

.custom-button {
	border: none;
	background-color: transparent;
}

.header {
	background: #fff;
	height: 290upx;
	padding-bottom: 110upx;

	.bg {
		width: 100%;
		height: 200upx;
		padding-top: 100upx;
		background-color: #4191ea;
	}
}

.box {
	width: 650upx;
	height: 280upx;
	border-radius: 20upx;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 5upx 20upx 0upx rgba(0, 0, 150, .2);

	.box-hd {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;

		.avator {
			width: 160upx;
			height: 160upx;
			background: #fff;
			border: 5upx solid #fff;
			border-radius: 50%;
			margin-top: -80upx;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.phone-number {
			width: 100%;
			text-align: center;
		}
	}

	.box-bd {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: center;

		.item {
			flex: 1 1 auto;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: center;
			border-right: 1px solid #f1f1f1;
			margin: 15upx 0;

			&:last-child {
				border: none;
			}

			.icon {
				width: 60upx;
				height: 60upx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				width: 100%;
				text-align: center;
				margin-top: 10upx;
			}
		}
	}
}

.list-content {
	background: #fff;
}

.list {
	width: 100%;
	border-bottom: 15upx solid #f1f1f1;
	background: #fff;

	&:last-child {
		border: none;
	}

	.li {
		width: 92%;
		height: 100upx;
		padding: 0 4%;
		border-bottom: 1px solid rgb(243, 243, 243);
		display: flex;
		align-items: center;

		&.noborder {
			border-bottom: 0
		}

		.icon {
			flex-shrink: 0;
			width: 50upx;
			height: 50upx;

			image {
				width: 50upx;
				height: 50upx;
			}
		}

		.text {
			padding-left: 20upx;
			width: 100%;
			color: #666;
		}

		.to {
			flex-shrink: 0;
			width: 40upx;
			height: 40upx;
		}
	}
}</style>
